<!DOCTYPE html>
<html>
<head>
    <title>$!user.userProfile.nickname</title>
    #parse("include/head.html")
</head>

<body>
<!--头部-->
#parse("include/nav.html")
<!--头部 end-->
<script>
    var praiseStatus = $op.Liked;
    var followedStatus = $op.Followed;
</script>
<div class="container clear">
    <div class="personal-left">
        <dl>
            <dt><img src="$user.avatar" /></dt>
            <dd>
                <h2>$user.nickname</h2>
                <p>账号：$user.uid</p>
                <p>上次直播：昨天</p>
                <p>TA的粉丝：$user.followerCnt</p>
                <p>TA的关注：$user.followingCnt</p>
            </dd>
            <a id="followBtn" href="javascript:void(0)" onclick="FollowBtnClick($user.uid)"
               class="btn #if ($op.Followed) dissable #else red #end "><i class="follow"></i>
                <span>#if ($op.Followed) 已#end关注</span>
            </a>
            <a id="praiseBtn" href="javascript:void(0)" onclick="PraiseBtnClick($user.uid)"
               class="btn #if ($op.Liked) dissable #else yellow-b #end"><i class="praise"></i>
                <span>#if ($op.Liked) 已#end点赞</span>
            </a>
        </dl>
    </div>
    <div class="personal-right">
        <div class="title">资料信息</div>
        <ul class="personal-info">
            <li>性　别：
                #if($user.gender == 0)
                未知
                #elseif($user.gender == 1)
                男
                #elseif($user.gender == 2)
                女
                #end</li>
            <li id="locationDes">所在地：$user.hometownId</li>
            <li>星　座：$user.constellation</li>
            <li>身　高：${user.height}cm</li>
            <li>体　重：${user.weight}kg</li>
            <li>三　围：${user.bwn}</li>
        </ul>
        <div class="title margin-t">动态</div>
        <div class="personal-dynamic">
            #foreach ($item in ${plan})
            <dl>
                <dt></dt>
                <dd>
                    <span class="planBeginTime">$date.format('yyyy-MM-dd HH:mm', $item.beginTime)-$date.format('HH:mm', $item.endTime) </span>
                    <span>$!item.platformName，房间号:$!item.roomId</span>
                    <a href="$item.roomUrl" class="plan_status on"> </a>
                </dd>
            </dl>
            #end
        </div>
        <div class="title margin-t">
            相册
            <a id="uploadBtn" href="javascript:void(0)">
                <img src="$request.contextPath/res/images/upload.png">上传照片</a>
        </div>
        <ul id="user_album" class="personal-photo">
        </ul>
        <div id="album_pager" style="margin: 5px;text-align: right"></div>

        <div class="clear"></div>
        <div id="commentArea" name="commentArea" class="title margin-t">评论</div>
        <div class="sorts-box-comment">
            <input type="hidden" name="boId" id="boId" value=$user.uid>
            <p><textarea id="commentInput" name="" cols="" rows="" class="textinput" placeholder="您必须登录后，才可发表评论。"></textarea></p>
            <p>
                <input type="button" value="发  布" class="btn yellow-s comment-btn submitBtn">
            </p>
        </div>
        <div id="comment_list" class="comment-box-b personal-c">
        </div>
        <div class="clear"></div>
        <div id="comment_pager" style="margin-top:10px; padding: 5px;text-align: right">
        </div>
    </div>
</div>
<!--底部-->
#parse("include/footer.html")
<!--底部 end-->
<!--<div id="imgViewFrame" style="display:none;" onclick="hideImgContain()" >
    <div class="popup-maskimg"></div>
    <div class="popup-imgctn">
        <span class="position:absolute;left:50%;top:50%;"><img id="viewImg" style=" position:relative; left:-50%;top:-50%; max-width:100%; max-height:100%; "></span>
    </div>
</div>-->

#parse("include/libs.html")
<input style="display:none;" name="file" id="albums" type="file" placeholder="上传相册"/>
<script type="text/javascript" src="$request.contextPath/res/plugin/laypage/laypage.js"></script>
<script type="text/javascript" src="$request.contextPath/res/dic/region.min.js"></script>
<script type="text/javascript" src="$request.contextPath/res/dic/regionHelper.js"></script>
<script type="text/javascript" src="$request.contextPath/res/plugin/jquery.ajaxfileupload.js"></script>
<script>
    var userAlbumes;
    $(function () {
        updateNav("#backnav");
        $(".planBeginTime").each(function(){
            var begin = new Date($(this).html().substr(0,16));
            if (begin-new Date()>0) {
                $(this).next().next().html("即将开始");
                $(this).next().next().removeClass("on");
            } else {
                $(this).next().next().html("正在直播");
            }
        });
        //已登录
        if(parseInt(uid)>0) {
            $("#commentInput").attr("placeholder", "在此输入评论内容");
        }
        $('.submitBtn').click(function() {
            publishComment(0, $("#commentInput").val())
        });
        getAlbumData(1);
        getCommentData(1);
        $("#locationDes").text("所在地："+RegionHelper.getRegionName('$user.hometownId'));
        var loadingIndex;
        $('input[type="file"]').ajaxfileupload({
            action: basePath+'/commons/upload?thumbnail=1',
            valid_extensions : ['jpeg','jpg','png','gif','JPEG','JPG','PNG','GIF'],
            params: {
                file: 'file'
            },
            onComplete: function(response) {
                saveAlubm(response);
                layer.close(loadingIndex);
                layer.msg("上传成功");
                getAlbumData(1);
            },
            onStart: function() {
                if ($(this)[0].files[0].size > 5*1024*1024) {
                    layer.msg("文件大小不能超过5M",{icon:5});
                    return false;
                }
                loadingIndex = layer.load(1);
            },
            onCancel: function() {
                console.log('no file selected');
            }
        });

        if(uid == $user.uid) {
            $("#uploadBtn").show().click(function(){
                $('#albums').trigger('click');
            });
            $("#user_album").addClass("self-photo");
        } else {
            $("#uploadBtn").hide();
        }
    });

    function saveAlubm(albumObj) {
        if(!albumObj.albumId) {
            albumObj.albumId = 0;
        }
        $.ajax({
            type: "POST",
            url: basePath+'/user/album',
            data: albumObj,
            success: function (data) {
            },
            dataType: 'JSON'
        });
    }

    function delAlubm(albumId) {
        $.ajax({
            type: "POST",
            url: basePath+'/user/album',
            data: {albumId:albumId},
            success: function (data) {
                console.log(data);
                getAlbumData(1);
            },
            dataType: 'JSON'
        });
    }

    function publishComment(prntID, content) {
        if (!isLogin()) {
            layer.msg("请先登录", {icon:5});
            return ;
        }
            $.ajax({
                url:basePath+"/user/addComment",
                type: "POST",
                dataType: 'json',
                data: {
                    "boId" : $("#boId").val(),
                    "parrentId":prntID,
                    "content":content,
                },
                success: function(data) {
                    if (data.resultCode == 0) {
                        layer.msg('发表成功！');
                        $("#commentInput").val("");
                        //location.reload(true);
                        $("#comment_list").html("");
                        getCommentData(1);
                    } else {
                        layer.msg('发表失败！', {icon: 5});
                    }
                },
                error:function(data){
                    layer.msg('系统繁忙，请稍候重试!');
                }
            });
    }

    function FollowBtnClick(boId) {
        if (!isLogin()) {
            layer.msg("请先登录", {icon:5});
            return ;
        }
        if(!followedStatus) {
            addFollow(boId);
            $("#followBtn").removeClass("red");
            $("#followBtn").addClass("dissable");
            $("#followBtn span").text("已关注");
            followedStatus = true;
        } else {
            unFollow(boId);
            $("#followBtn").removeClass("dissable");
            $("#followBtn").addClass("red");
            $("#followBtn span").text("关注");
            followedStatus = false;
        }
    }

    function PraiseBtnClick(boId) {
        if (!isLogin()) {
            layer.msg("请先登录", {icon:5});
            return ;
        }
        if(!praiseStatus) {
            addPraise(boId);
            $("#praiseBtn").removeClass("yellow-s");
            $("#praiseBtn").addClass("dissable");
            $("#praiseBtn span").text("已赞");
            praiseStatus = true;
        } else {
            unPraise(boId);
            $("#praiseBtn").removeClass("dissable");
            $("#praiseBtn").addClass("yellow-s");
            $("#praiseBtn span").text("点赞");
            praiseStatus = false;
        }
    }

    function getCommentData(curr){
        var brands;
        $.ajax({
            url: basePath+"/user/getBoComments",
            type: "POST",
            dataType: 'json',
            data: {
                "pgNum" : curr,
                "pgSize" : 5,
                "boId":$user.uid,
            },
            success: function (data) {
                brands = data["list"];
                //调用分页
                laypage({
                    cont: 'comment_pager',
                    pages: data['pages'],
                    curr: curr,
                    skin: '#ffab33',
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            getCommentData(obj.curr);
                        }
                    }
                })
                var str = "";
                for(var i in brands){
                    var kys = brands[i];
                    str += "<dl>"
                    str += "<dt><img src='"+kys['avatar']+"'></dt>";
                    str += "<dd>"
                    str += "<h2>"+kys['nickname']+"</h2>";
                    str += "<p>" + kys['content']+"</p>";
                    str+="<p><font>"+kys['timeDes']+"</font> <font showRelay=0 style=\"cursor: pointer;\" onclick=\"doReplay(this, '"+kys['commentId']+"')\">回复（"+kys['replays'].length+"）</font></p>";
                    if (kys['replays'].length>0) {
                        for (var j in kys['replays']) {
                            str += "<dl class=\"reply-shows\">"
                            var rep = kys['replays'][j];
                            str += "<dt><img src='"+rep['avatar']+"'></dt>";
                            str += "<dd><h2>"+rep['nickname']+"</h2>";
                            str += "<p>" + rep['content']+"</p>";
                            str+="<p><font>"+rep['timeDes']+"</font></p>";
                            str += "</dd></dl>"
                        }
                    }
                    str += "</dd></dl>"
                }
                $("#comment_list").html(str);
            },
            error:function(data){
                layer.msg('获取记录失败！', {icon: 5});
            }
        });
    }

    function getAlbumData(curr){
        var brands;
        console.log("GetAlbumData"+curr);
        $.ajax({
            url: basePath+"/user/getUserAlbum",
            type: "POST",
            dataType: 'json',
            data: {
                "pgNum" : curr,
                "pgSize" : 9,
                "uid":$user.uid,
            },

            success: function (data) {
                brands = data["list"];
                //调用分页
                laypage({
                    cont: 'album_pager',
                    pages: data['pages'],
                    curr: curr, //当前页
                    skin: '#ffab33',
                    prev: '上一页', //若不显示，设置false即可
                    next: '下一页', //若不显示，设置false即可
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            getAlbumData(obj.curr);
                        }
                    }
                })
                var str = "";
                userAlbumes = new Array();
                for(var i in brands){
                    var kys = brands[i];
                    str += "<li><img onclick=\"viewBigImg("+i+")\" src='"+kys['url']+"'>" +
                            "<span><img onclick=\"delAlubm('"+kys['albumId']+"')\" src=\""+basePath+"/res/images/delete.png\"></sp</li>";
                    userAlbumes.push({
                        alt:"相册图片",
                        pid:kys['albumId'],
                        src:kys['url'],
                        thumb:kys['thumbnailUrl']
                    })
                }
                $("#user_album").html(str);

            },
            error:function(data){
                layer.msg('获取记录失败！', {icon: 5});
            }
        });
    }

    function viewBigImg(index) {
        console.log(userAlbumes);
        var data = {
            "title": "", //相册标题
                "id": 123, //相册id
                "start": index, //初始显示的图片序号，默认0
                "data": userAlbumes
        };
        layer.photos({
                photos: data //格式见API文档手册页
            });
    }

    function hideImgContain() {
        $("#imgViewFrame").hide();
    }

    function doReplay(obj, parentId) {
        if ($(obj).attr("showRelay") == 1) {
            $(obj).html($(obj).attr("preContent"));
            $(obj).attr("showRelay",0);
            $(".tmpReply").each(function(){
                $(this).remove();
            });
        } else {
            if(isNaN(parseInt(uid))) {
                layer.msg("请先登录!", {icon:5});
                showLoginDlg("login");
                return;
            }
            $(".tmpReply").each(function(){
                $(this).remove();
            });
            $(obj).attr("preContent", $(obj).html());
            $(obj).html('收起回复');
            $(obj).attr("showRelay",1);
            $(obj).after("<p class=\"tmpReply\">"
                    + "<textarea id=\"tmpInput\" rows=\"2\" style=\"width:670px;\" class=\"textinput\"></textarea>"
                    + "<input type='button' class=\"btn yellow-s comment-btn\" value=\"发 布\" onclick=\"tmpPub('" + parentId + "')\"></input> <p>");
        }

    }

    function tmpPub(prId) {
        publishComment(prId, $("#tmpInput").val());
    }

</script>
</body>
</html>
